<html>
<head>
<title>推送消息</title> 
{{>/WEB-INF/pages/common/meta_base.part.html}}
{{>/WEB-INF/pages/common/refs_base.part.html}}
<script src="{{ctx}}/static/jquery-blockui/jquery.blockUI.js" type="text/javascript"></script>
<script>
	$(document).ready(function() {
		//聚焦第一个输入框
		$("#msg_title").focus();
		//为inputForm注册validate函数
		$("#inputForm").validate({
			rules:{
				'message.title':{
					required:true,
					maxlength:50
				},
				'message.content':{
					maxlength:256
				}
			}
		});
		
		$("#inputForm").submit(function(evt){
			var form = $(this);
			if(form.valid()==false){
				evt.preventDefault();
				return false;
			}
			var checkedTagBoxes=$(".tags:checkbox:checked", form);
			if($("#rt_tag").prop('checked') && checkedTagBoxes.length<=0){
				bootbox.alert('<h4>没有选择标签哦</h4>')
				evt.preventDefault();
				return false;
			}
			//删除所有.gen的hidden控件
			$("input[type='hidden'][class='gen']", form).remove();
			//处理extras
			$("#extrasTable tr").each(function(i, tr){
				var inputs=$("input", tr);
				var name=inputs[0].value;
				var value=inputs[1].value;
				var checked=inputs[2].checked;
				if(name!=""&&value!=null){
					var h=['<input type="hidden" class="gen" name="extras[',name,']" value="',value,'"/>'].join('');
					$("td:last",tr).append(h);
					if(checked){
						h=['<input type="hidden" class="gen" name="directExtrasPropertys" value="',name,'"/>'].join('');
						$("td:last",tr).append(h);
					}
				}
			});
			var tags={};
			checkedTagBoxes.each(function(i, chkbox){
				if(tags[chkbox.name]==undefined){
					tags[chkbox.name]=[chkbox.value]
				}
				else{
					tags[chkbox.name].push(chkbox.value);
				}
			});
			for(key in tags){
				var h=['<input type="hidden" class="gen" name="tags[',key,']" value="',tags[key].join(','),'"/>'].join('');
				form.append(h)
			}
			var data=$("#inputForm").serialize();
			$.blockUI({
				message: '<h4>正在处理，请稍候...</h4>',
				css: { 
		            border: 'none', 
		            padding: '15px', 
		            backgroundColor: '#000', 
		            '-webkit-border-radius': '10px', 
		            '-moz-border-radius': '10px', 
		            opacity: .5, 
		            color: '#fff' 
		        }
			});
			$.ajax({ 
				type: "POST", 
				url: form.attr("action"), 
				data: data, 
				headers: {
					Accept: "application/json; charset=utf-8"
				},
				contentType: "application/x-www-form-urlencoded; charset=utf-8", 
				dataType: "text", 
				success: function(text) { 
					$.unblockUI();
					var ret=$.parseJSON(text);
					if(ret.result){
						var html='<div>'+
							'<h3>推送请求提交成功</h3>'+
							'<a class="btn btn-default" href="{{ctx}}/push/list-pushs/'+ret.pushRequestId+'?appId={{appId}}">查看推送详情</a>'+
							'</div>'
						bootbox.alert(html);
					}
					else{
						var html=['<div class="alert alert-error"><h3>推送请求提交失败</h3><p>',ret.message,'</p>'];
						if(ret.systemInvokeSequence){
							html.push('<p>远程系统调用序列:');
							html.push(ret.systemInvokeSequence.join('->'));
							html.push('</p>');
						}
						html.push('</div');
						bootbox.alert(html.join(''));
					}
				}, 
				error: function(xhr) { 
					$.unblockUI();
					bootbox.alert(xhr.responseText);
				}
			});
			evt.preventDefault();
			return false;
		});
		
		$("#addTag").bind("click", function(){
			var name=$('#extrasTable tr:last input')[0].name;
			var index=/\d+/.exec(name)[0];
			index=parseInt(index);
			index++;
			$("#extrasTable")
		  	.append('<tr>'+
		  			'<td><input type="text" name="key'+index+'" style="width:100px"/></td>'+
		  			'<td>=</td>'+
					'<td><input type="text" name="value'+index+'" style="width:300px"/></td>'+
					'<td><label class="checkbox"><input type="checkbox" name="dep'+index+'" /><small>推送到终端</small></label>'+
		  		'</tr>');
		}); 
		 
		 $("#delTag").bind("click", function(){
			var name=$('#extrasTable tr:last input')[0].name;
			var index=/\d+/.exec(name)[0];
			index=parseInt(index);
			if(index==0){
				return;
			}
		  	$('#extrasTable tr:last').remove();
		 }); 
		 
		 $("input[name='message.messageType']").bind("click", function(ctrl){
			 if($(ctrl.target).val()=='MODULE'){
				 $('#modules').prop('disabled', false);
				 $('#moduleName').prop('disabled', false);
				 $('#chk_moduleBadge').prop('disabled', false);
				 $('#chk_busiDetail').prop('disabled', false);
				 $("#modules").trigger("change");
			 }
			 else{
				 $('#modules').prop('disabled', true);
				 $('#moduleName').prop('disabled', true);
				 $('#chk_moduleBadge').prop('disabled', true);
				 $('#chk_busiDetail').prop('disabled', true);
			 }
		 });
		 
		 $("#modules").on("change", function(evt){
			 var selected=$(this).children('option:selected');
			 var name=selected.text().trim();
			 $('#moduleName').val(name);
		 });
		 
		 $("input[name='receiverType']").bind("click", function(ctrl){
			 var checkBoxes=$("input[type='checkbox'][class='tags']");
			 if($(ctrl.target).val()=='TAG'){
				 checkBoxes.attr('disabled', false);
			 }
			 else{
				 checkBoxes.attr('disabled', true);
			 }
		 });
	});
</script>
</head>
<body>
	{{>/WEB-INF/pages/common/layout_header.part.html}}
	<div class="container">
		<ul class="breadcrumb">
		  <li><a href="{{ctx}}">首页</a></li>
		  <li><a href="{{ctx}}/system/cloud">云服务</a></li>
		  <li class="active">推送消息</li>
		</ul>
		<hr class="hr1">
		<div class="hr-10"></div>
		<div class="hr-10"></div>
		<div class="hr-10"></div>
		<ul class="nav nav-tabs">
			<li class="active"><a href="javascript:void(0);">推送消息</a></li>
			<li><a href="{{ctx}}/push?appId={{appId}}">推送历史</a></li>
			<li><a href="{{ctx}}/push/config?appId={{appId}}">配置管理</a></li>
		</ul>
		<div style="padding-top:25px">
		<form id="inputForm" action="{{ctx}}/push/create" method="post" class="form-horizontal">
			<div class="form-group">
				<label for="appName" class="col-sm-2 control-label">应用名称:</label>
				<div class="col-sm-10">
					<span class="label label-important btn-danger disabled" style="top:10px;position:relative;">{{app.app_name}}</span>
					<input type="hidden" name="appId" value="{{appId}}"/>
					<input type="hidden" name="appKey" value="{{appKey}}"/>
				</div>
			</div>
			<div class="form-group">
				<label for="checkin_title" class="col-sm-2 control-label">推送目标:</label>
				<div class="col-sm-10">
					<label> 
						<input class="choice" type="radio" name="receiverType" value="APP_ID" checked />该应用的所有设备
					</label>
					<div>
						{{#tagSum}}
						<label> 
							<input class="choice" type="radio" name="receiverType" value="TAG" />按标签
						</label>
						{{/tagSum}}
						{{#tagSum}}
							{{#tags}}
							<div class="form-inline">
								<span class="label label-info" style="position:relative;top:5px;">{{key}}</span>
								{{#values}}
									<label class="checkbox">
									<input type="checkbox" class="tags" value="{{.}}" name="{{key}}" disabled/>
									<span class="label label-success">{{.}}</span>
									</label>
								{{/values}}
							</div>
							{{/tags}}
						{{/tagSum}}
					</div>
					{{^tagSum}}
					<label> 
						<input class="choice" type="radio" name="receiverType" value="TAG" disabled/>按标签&nbsp;(该应用暂无标签数据)
					</label>
					{{/tagSum}}
				</div>
			</div>
			<div class="form-group">
				<label for="checkin_title" class="col-sm-2 control-label">消息类型:</label>
				<div class="col-sm-10 childblock">
					<label> 
						<input class="choice" type="radio" name="message.messageType" value="SYS" checked/>系统消息
					</label>
					<label> 
						<input class="choice" type="radio" name="message.messageType" value="MODULE" />模块消息
					</label>
					<select id="modules" name="moduleIdentifer" class="input-large" disabled>
						{{#modules}}
						<option value="{{identify}}">
							{{name}}
						</option>
						{{/modules}}
					</select>
					<input type="hidden" id="moduleName" name="moduleName" disabled/>
					<label class="checkbox">
						<input id="chk_moduleBadge" type="checkbox" name="extras['moduleBadge']" checked disabled/>
						<span>在模块图标上显示消息条数</span>
					</label>
					<label class="checkbox">
						<input id="chk_busiDetail" type="checkbox" name="extras['busiDetail']" checked disabled/>
						<span>点击消息后显示业务信息</span>
					</label>
				</div>
			</div>
			<div class="form-group">
				<label for="msg_title" class="col-sm-2 control-label">推送标题:</label>
				<div class="col-sm-6">
					<input type="text" id="msg_title" name="message.title"
						class="form-control" required value="{{msg.title}}" placeholder="最多输入50个字符"/>
				</div>
			</div>
			<div class="form-group">
				<label for="msg_content" class="col-sm-2 control-label">推送内容:</label>
				<div class="col-sm-6">
					<textarea id="msg_content" name="message.content" class="form-control" rows="6" required placeholder="最多输入256个字符">{{msg.content}}</textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">高级:</label>
				<div class="col-sm-10">
					<div class="btn-group">
						<button type="button" id="addTag" class="btn btn-default btn-xs" >增加</button>
						<button type="button" id="delTag" class="btn btn-default btn-xs" >删除</button>
					</div>
					<table id="extrasTable">
						<tr>
							<td><input type="text" name="key0" style="width:100px"/></td>
							<td>=</td>
							<td><input type="text" name="value0" style="width:300px"/>
							</td>
							<td><label class="checkbox"><input type="checkbox" name="dep0" /><small>推送到终端</small></label>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
				<input id="submit_btn" class="btn btn-primary" type="submit" value="提交" />
				</div>
			</div>
		</form>
		</div>
	</div>
	{{>/WEB-INF/pages/common/layout_footer.part.html}}
</body>
</html>
